<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        section{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto;
            display: grid;
            /* grid-template-columns:1fr 1fr 1fr ;
            grid-template-rows:1fr 1fr 1fr  ;
            grid-template-areas: 
                "a1 a2 a3"
                "a4 a4 a4"
                "a7 a8 a9" */
            grid-template: 
                "a1 a2 a3" 100px
                "a4 a5 a6" 100px
                "a7 a8 a9" 100px
                /100px 100px 100px;
                /* justify-items: start;
                align-items: end */
               /*  place-items:start end; */ /* eslint写代码的一种规范 */
               /* justify-content: end;
               align-content: center; */
               /* place-content:end center */
               /* grid-column-gap: 10px;
               grid-row-gap: 20px */
               grid-gap: 10px 20px
        }
        div{
            border: 1px solid #ccc
        }
        .box{
            /* background: pink; */
            grid-area: a4;
        }
    </style>
</head>
<body>
    <section>
        <div>1</div><div>2</div><div>3</div>
        <div class="box">4</div><div>5</div><div>6</div>
        <div>7</div><div>8</div><div>9</div>
    </section>
</body>
</html>
<!-- 
    1.启动网格布局
        属性：display
        属性值:grid  
        结论：
            - 容器是从上到下进行排列的
            - 在设置了网格布局之后，当前项目的高度会发生变化，但是在浏览器中是看不见的，需要审查代码才可以看见网格线
    
    2. 网格项目的宽度和高度的设置
        属性:
            - grid-template-columns: 列/宽度
            - grid-template-rows:	行/高度
        属性值：根据当前项目的多少进行设置
            - px
            - % 百分比
            - auto 自动
            - 混用
            - 网格布局中常用的一个单位 fr(fraction:自适应单位,一系列空间的自动分配)
        
    3.划分网格区域
        属性:grid-template-areas
        属性值:
            - 需要跟当前子级项目相对应
        
        属性:grid-area
        属性值：需要个父级容器形成对应

        简写方式:grid-template 是设置当前网格布局的宽高和区域划分的简写

    4.水平和垂直方向的显示方式
        属性:
            - justify-items     水平方向显示方式
            - align-items 		垂直方向显示方式
        属性值:
            - strat
            - end
            - center
            - stretch 默认值
        简写方式:place-items 表示当前水平和垂直方向的简写
            属性值:垂直 水平
        注意事项:在设置这个属性的时候需要注意，当前由于编辑器版本问题，这个属性有兼容提示问题

    5.控制项目的分布方式
        属性:
            - justify-content	水平方向的分布设置
            - align-content		垂直方向的分布设置
        属性值：
            - start
            - end
            - center
            - stretch 拉伸
            - space-between
            - space-around
            - space-evenly
        简写方式:
            place-content:垂直 水平

    6.表示当前项目之间的间隔
        属性
            - grid-column-gap 	列之间的距离
            - grid-row-gap 		行之间的距离
        简写:grid-gap: 行 列

 -->